<script type="text/html" data-help-name="绘制矩形">
    <p>绘制矩形</p>
</script>
  
  
<script type="text/html" data-template-name="绘制矩形">
  <!-- Name -->
  <div class="form-row">
    <label for="node-input-name"><i class="fa fa-tag"></i> 名称</label>
    <input type="text" id="node-input-name" data-i18n="[placeholder]name">
  </div>
  <!-- x -->
  <div class="form-row">
    <label for="node-input-coord_x"><i class="fa fa-circle"></i> x坐标</label>
    <input type="text" id="node-input-coord_x">
  </div>
  <!-- y -->
  <div class="form-row">
    <label for="node-input-coord_y"><i class="fa fa-circle"></i> y坐标</label>
    <input type="text" id="node-input-coord_y">
  </div>
  <!-- width -->
  <div class="form-row">
    <label for="node-input-width"><i class="fa fa-circle"></i> 宽度</label>
    <input type="text" id="node-input-width">
  </div>
  <!-- height -->
  <div class="form-row">
    <label for="node-input-height"><i class="fa fa-circle"></i> 高度</label>
    <input type="text" id="node-input-height">
  </div>
  <!-- line width -->
  <div class="form-row">
    <label for="node-input-line_width"><i class="fa fa-circle"></i> 线宽</label>
    <input type="text" id="node-input-line_width">
  </div>
  <!-- border radius -->
  <div class="form-row">
    <label for="node-input-border_radius"><i class="fa fa-circle"></i> 圆角弧度</label>
    <input type="text" id="node-input-border_radius">
  </div>
  <!-- fill color -->
  <div class="form-row">
    <label for="node-input-fill_color"><i class="fa fa-circle"></i> 填充色</label>
    <select id="node-input-fill_color" style="width: 250px;">
        <option value="#FF0000">红色</option>      <!-- red -->
        <option value="#00FF00">绿色</option>   <!-- green -->
        <option value="#0000FF">蓝色</option>    <!-- blue -->
        <option value="#FFFF00">黄色</option>  <!-- yellow -->
        <option value="#800080">紫色</option>  <!-- purple -->
        <option value="#00FFFF">青色</option>    <!-- cyan -->
        <option value="#FFA500">橙色</option>  <!-- orange -->
        <option value="#FFC0CB">粉红色</option>  <!-- pink -->
        <option value="#000000">黑色</option>   <!-- black -->
        <option value="#FFFFFF">白色</option>   <!-- white -->
        <option value="custom">自定义</option>
      </select>
  </div>
      <!-- 下拉选项框选择了自定义 -->
      <div class="form-row" id="node-set-state1">
        <label for="node-input-custom_color1">&nbsp;</label>
        <input type="text" id="node-input-custom_color1" data-i18n="[placeholder]填写格式为#0099FF">
    </div>

  <!-- border color -->
  <div class="form-row">
    <label for="node-input-border_color"><i class="fa fa-circle"></i> 边框颜色</label>
    <select id="node-input-border_color" style="width: 250px;">
      <option value="#FF0000">红色</option>      <!-- red -->
      <option value="#00FF00">绿色</option>   <!-- green -->
      <option value="#0000FF">蓝色</option>    <!-- blue -->
      <option value="#FFFF00">黄色</option>  <!-- yellow -->
      <option value="#800080">紫色</option>  <!-- purple -->
      <option value="#00FFFF">青色</option>    <!-- cyan -->
      <option value="#FFA500">橙色</option>  <!-- orange -->
      <option value="#FFC0CB">粉红色</option>  <!-- pink -->
      <option value="#000000">黑色</option>   <!-- black -->
      <option value="#FFFFFF">白色</option>   <!-- white -->
      <option value="custom">自定义</option>
    </select>
  </div>
    <!-- 下拉选项框选择了自定义 -->
    <div class="form-row" id="node-set-state2">
        <label for="node-input-custom_color2">&nbsp;</label>
        <input type="text" id="node-input-custom_color2" data-i18n="[placeholder]填写格式为#0099FF">
    </div>

    <!-- 优先级 -->
    <div class="form-row" id="node-set-tick">
      <label>&nbsp;</label>
      <input type="checkbox" id="node-input-set" style="display: inline-block; width: auto; vertical-align: top;">
      <label for="node-input-set" style="width: 70%;">设置优先级: 默认优先级为7 </label>
    </div>
    <div class="form-row" id="node-set-state3">
      <label for="node-input-priority">&nbsp;</label>
      <select id="node-input-priority" style="width: 250px;">
        <option value="1">优先级1</option>
        <option value="2">优先级2</option>
        <option value="3">优先级3</option>
        <option value="4">优先级4</option>
        <option value="5">优先级5</option>
        <option value="6">优先级6</option>
        <option value="7">优先级7</option>
        <option value="8">优先级8</option>
        <option value="9">优先级9</option>
        <option value="10">优先级10</option>
      </select>
    </div>
  </script>
  

  
  <script type="text/javascript">
      RED.nodes.registerType('绘制矩形',{
        category: 'Block LCD绘图',
        color: '#ffcb3c',
        defaults: {
          name: {value: ""},
          coord_x: {value: "", required: true},  // int
          coord_y: {value: "", required: true},  // int
          width: {value: "", required: true},  // int
          height: {value: "", required: true},  // int
          line_width: {value: "2", required: true}, // int
          border_radius: {value:"5", required: true}, // int
          fill_color: {value: "0xFFFFFF"},  // str
          border_color: {value: "0x000000"},  // str
          custom_color1: {value:""},     // str
          custom_color2: {value:""},     // str
          priority: {value:"7"},   // int\
          set: {value:""}
        },
        inputs:1,
        outputs:0,
        icon: "font-awesome/fa-pencil",
        label: function() {
          return this.name||this._("绘制矩形");
        },

        oneditprepare: function() {

          var setstate1 = function () {
              if ($('#node-input-fill_color').val() === "custom") { // 判断选中的选项是否为"custom"
                  $("#node-set-state1").show();
              } else {
                  $("#node-set-state1").hide();
              }
          };
          $("#node-input-fill_color").change(function () { setstate1(); }); // 绑定下拉菜单的变化事件到setstate函数
          setstate1();   // 初始化时也调用一次以设置初始状态


          var setstate2 = function () {
              if ($('#node-input-border_color').val() === "custom") {
                  $("#node-set-state2").show();
              } else {
                  $("#node-set-state2").hide();
              }
          };
          $("#node-input-border_color").change(function () { setstate2(); });
          setstate2();


          var setstate3 = function () {
            if ($('#node-input-set').is(":checked")) {
                $("#node-set-state3").show();
            } else {
                $("#node-set-state3").hide();
            }
          };
          $("#node-input-set").change(function () { setstate3(); });
          setstate3();
        }
        
      });
    </script>
    
